<template>
	<view>
		<view class="row">
			<view class="nickname">
				{{ vk.getVuex('$user.userInfo.nickName') || '未登录' }}
			</view>
			<view class="">
				<u-button type="primary" size="mini" plain v-if="vk.pubfn.isNull(vk.getVuex('$user.userInfo.nickName'))" @click="login"> 登 录 </u-button>
				<u-button type="primary" size="mini" plain v-else @click="logout">退出登录</u-button>
			</view>
		</view>
		
		<block v-if="vk.getVuex('$user.userInfo.userId')">
			<!-- 列表菜单 -->
			<view class="list-bar">
				<view class="row" v-for="(item,index) in funcList" :key="index" :data-index="index" @click="toFunc">
					<!-- <u-icon class="icon-left" :name="item.icon" custom-prefix="custom-icon" size="36"
						:color="item.iconColor"></u-icon> -->
					<view class="title">{{item.title}}</view>
					<u-icon class="icon-right" name="arrow-right" size="36" color="#C7C7C7"></u-icon>
				</view>
			</view>
		</block>
		
		
	</view>
</template>

<script>
	// 功能集合
	const funcList = [{
		id: 1,
		title: '修改密码',  // 文字
		icon: 'custom-icon-boshimao',  // 自定义图标名称
		iconColor: '#EC0F7D',  // 图标颜色
		href: '/pages/my/pwd',  // 跳转到页面
	}];
	export default {
		data() {
			return {
				funcList,
			}
		},
		methods: {
			// 登录
			login() {
				uni.navigateTo({
					url: "/pages/login/login",
					events: {
						loginSuccess: () => {
							vk.navigateToHome();
						}
					}
				})
			},
			// 退出登录
			logout() {
				vk.toast("退出登录成功", "success", 1000, true, () => {
					vk.setVuex('$user.userInfo', {});
					vk.setVuex('$user.token', null);
				});
			},
			updateVersion(){
				// #ifdef MP
				vk.updateManager.updateReady(); // 此代码可以让小程序自动检测最新版本
				// #endif
			},
			toFunc(e){
				if(!vk.getVuex('$user.userInfo.userId')) {
					vk.toast('请先登录');
					return;
				}
				const index = e.currentTarget.dataset.index;
				const item = funcList[index];
				console.log('index', index)
				console.log(funcList[index])
				vk.navigateTo(`${item.href}?id=${item.id}&title=${item.title}`)
			},
		}
	}
</script>

<style scoped lang="scss">
	.row{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.list-bar {
		margin-top: 50rpx;
		margin-bottom: 50rpx;

		.row {
			padding: 16rpx;
			display: flex;
			align-items: center;

			.icon-left {
				margin-right: 10rpx;
			}

			.icon-right {
				margin-left: auto;
			}
		}
	}
</style>
